<template>
  <div>
    <h3>{{ title }}</h3>
    <p>
      <span>发表时间：{{ time | dateFormat }}</span>
      <span>点击：{{ count }}次</span>
    </p>
    <hr />
    <div>
      <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
    </div>
    <comments></comments>
  </div>
</template>

<script>
import comments from "../sub-components/comment.vue";

export default {
  props: ["id"],
  data() {
    return {
      title: "爱心是一片照射在冬日的阳光，使贫病交迫的人感到人间的温暖",
      time: new Date(),
      count: 88676,
      slide1: [
        {
          src:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg",
          msrc:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg",
          alt: "picture1",
          title: "Image Caption 1",
          w: 600,
          h: 400,
        },
        {
          src:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg",
          msrc:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg",
          alt: "picture2",
          title: "Image Caption 2",
          w: 1200,
          h: 900,
        },
        {
          src:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg",
          msrc:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg",
          alt: "picture1",
          title: "Image Caption 1",
          w: 600,
          h: 400,
        },
        {
          src:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg",
          msrc:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg",
          alt: "picture2",
          title: "Image Caption 2",
          w: 1200,
          h: 900,
        },
      ],
    };
  },
  created() {},
  methods: {
    handleClose() {
      console.log("close event");
    },
  },
  components: {
    comments: comments,
  },
};
</script>

<style  scoped>
h3 {
  padding-top: 8px;
  padding-left: 10px;
  font-size: 18px;
  text-align: left;
}
p {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 0;
}
</style>